<script setup lang="ts">
import { compressImageSync } from '@/tools';

defineOptions({
  name: 'BlurLoadingImg',
});

withDefaults(
  defineProps<{
    src: string
    width?: string
    height?: string
    type?: 'blur' | 'opacity'
    lazyLoad?: boolean
    compress?: boolean
    mode?: 'aspectFill' | 'aspectFit' | 'widthFix' | 'heightFix' | 'scaleToFill'
  }>(),
  {
    width: '100%',
    height: '100%',
    type: 'blur',
    lazyLoad: false,
    compress: true,
    mode: 'aspectFill',
  },
);

const status = ref(false);
</script>

<template>
  <image
    :src="compress ? compressImageSync(src) : src"
    class="transition-opacity duration-300"
    :mode="mode"
    :lazy-load="lazyLoad"
    :style="{ width, height }"
    :class="{
      'bg-gray-100': !status,
      'opacity-100 blur-none': status,
      'blur-md': type === 'blur',
      'opacity-0': type === 'opacity',
    }"
    @load="status = true"
  />
</template>

<style lang="scss" scoped></style>
